<?php
header('content-type:text/html;charset=utf8');
require_once "../config.php";
require_once "../functions.php";

checkLogin();
?>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <title>Categories &laquo; Admin</title>
  <link rel="stylesheet" href="../static/assets/vendors/bootstrap/css/bootstrap.css">
  <link rel="stylesheet" href="../static/assets/vendors/font-awesome/css/font-awesome.css">
  <link rel="stylesheet" href="../static/assets/css/admin.css">
</head>
<body>

  <div class="main">
    <?php 
      $current_page = 'categories';
    ?>
    <?php include_once "./public/_navbar.php" ?>
    <div class="container-fluid">
      <div class="page-title">
        <h1>分类目录</h1>
      </div>
      <!-- 有错误信息时展示 -->
      <div class="alert alert-danger" style="display:none;" id="msg">
        <strong>错误！</strong>发生XXX错误
      </div>
      <div class="row">
        <div class="col-md-4">
          <form id="data">
            <h2>添加新分类目录</h2>
            <div class="form-group">
              <label for="name">名称</label>
              <input id="name" class="form-control" name="name" type="text" placeholder="分类名称">
            </div>
            <div class="form-group">
              <label for="slug">类名</label>
              <input id="classname" class="form-control" name="classname" type="text" placeholder="类名">
              <p class="help-block">https://zce.me/category/<strong>class</strong></p>
            </div>
            <div class="form-group">
              <label for="slug">别名</label>
              <input id="slug" class="form-control" name="slug" type="text" placeholder="slug">
              <p class="help-block">https://zce.me/category/<strong>slug</strong></p>
            </div>
            <div class="form-group">
              <!-- <button class="btn btn-primary" type="submit">添加</button> -->
              <input type="button" value="添加" class="btn btn-primary" id="btn-add">
              <input style="display:none;" type="button" value="编辑完成" class="btn btn-primary" id="btn-edit">
              <input style="display:none;" type="button" value="取消编辑" class="btn btn-primary" id="btn-cancle">
            </div>
          </form>
        </div>
        <div class="col-md-8">
          <div class="page-action">
            <!-- show when multiple checked -->
            <a id="delAll" class="btn btn-danger btn-sm" href="javascript:;" style="display: none">批量删除</a>
          </div>
          <table class="table table-striped table-bordered table-hover">
            <thead>
              <tr>
                <th class="text-center" width="40"><input type="checkbox"></th>
                <th>名称</th>
                <th>Slug</th>
                <th>类名</th>
                <th class="text-center" width="100">操作</th>
              </tr>
            </thead>
            <tbody>
              
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>

  <?php include_once "./public/_aside.php"; ?>

  <script src="../static/assets/vendors/jquery/jquery.js"></script>
  <script src="../static/assets/vendors/bootstrap/js/bootstrap.js"></script>
  <script src="../static/assets/vendors/art-template/template-web.js"></script>
  <script type="text/template" id="tpl">
    {{each data}}
      <tr data-categoryId="{{$value.id}}">
        <td class="text-center"><input type="checkbox"></td>
        <td>{{$value.name}}</td>
        <td>{{$value.slug}}</td>
        <td>{{$value.classname}}</td>
        <td class="text-center">
          <a href="javascript:;" class="btn btn-info btn-xs edit" data-categoryId="{{$value.id}}">编辑</a>
          <a href="javascript:;" class="btn btn-danger btn-xs del">删除</a>
        </td>
      </tr>
    {{/each}}
  </script>
  <script>
  $(function(){
    $.ajax({
      type:'post',
      url:'api/_getCategoryData.php',
      dataType:'json',
      success:function(res){
        console.log(res);
        if(res.code == 1){
          var html = template('tpl',res);
          // console.log(html);
          $('tbody').html(html);
        }
      }
    })
    //添加功能
    $('#btn-add').on("click",function(){
      var name = $('#name').val();
      var slug = $('#slug').val();
      var classname = $('#classname').val();

      if(name == ""){
        //提示用户分类名称不能为空
        $("#msg").text("分类的名称不能为空");
        $(".alert").show();
        return;
      }

      if(slug == ""){
        //提示用户分类名称不能为空
        $("#msg").text("分类的别名不能为空");
        $(".alert").show();
        return;
      }

      if(classname == ""){
        //提示用户分类名称不能为空
        $("#msg").text("分类的名称不能为空");
        $(".alert").show();
        return;
      }

      $.ajax({
        type: "post",
        url: "api/_addCategory.php",
        data: $('#data').serialize(),
        dataType: "json",
        success: function (res) {
          // console.log(res);
          if(res.code == 1){
            location.reload();
          }
        }
      });
    })
    //编辑功能
    $('tbody').on("click",".edit",function(){
      var categoryId = $(this).attr("data-categoryId");
      // console.log(categoryId);
      //把对应的id存储到编辑完成按钮身上
      $('#btn-edit').attr('data-categoryid',categoryId);
      // console.log(1)
      //在这里面完成编辑的逻辑
      //先把添加按钮隐藏，再把编辑完成、取消编辑按钮显示出来
      $('#btn-add').hide();
      $('#btn-edit').show();
      $('#btn-cancle').show();

      //把点击的按钮对应的数据 填充到对应的输入框
      var name = $(this).parents('tr').children().eq(1).text();
      var slug = $(this).parents('tr').children().eq(2).text();
      var className = $(this).parents('tr').children().eq(3).text();
      // console.log(name,slug,className);

      $('#name').val(name);
      $('#slug').val(slug);
      $('#classname').val(className);
    })

    //编辑完成按钮的点击事件
    $('#btn-edit').on('click',function(){
      //先获取点击按钮对应的数据的id
      var categoryId = $(this).attr('data-categoryid');
      // console.log(categoryId);
      //把id和修改过后的数据，发送到服务器，根据id对应的数据进行更新
      // console.log(categoryId);
      var name = $('#name').val();
      var slug = $('#slug').val();
      var className = $('#classname').val();
      // console.log(name,slug,className,categoryId);
      // return;
      $.ajax({
        type: "post",
        url: "api/_updateCategory.php",
        data: {name:name,slug:slug,classname:className,id:categoryId},
        dataType: "json",
        success: function (res) {
          if(res.code == 1){
            location.reload();
          }
        }
      });
    });
    
    //取消编辑
    $('#btn-cancle').on('click',function(){
      $('#btn-add').show();
      $('#btn-edit').hide();
      $('#btn-cancle').hide();
      $('#name').val('');
      $('#slug').val('');
      $('#classname').val('');
    })

    //删除功能
    $('tbody').on('click','.del',function(){
      var row = $(this).parents('tr');
      //根据当前点击的
      var categoryId = $(this).parents('tr').attr('data-categoryId');
      // console.log(categoryId);
      $.ajax({
        type: "post",
        url: "api/_delCategory.php",
        data: {id:categoryId},
        dataType: "json",
        success: function (res) {
          if(res.code == 1){
            row.remove();
          }
        }
      });
    })

    //全选功能
    $('thead input').on('click',function(event){
      //控制别的多选框跟我的当前的选中状态一样
      //获取自己的选中状态
      var status = $(this).prop('checked');
      //控制别的多选框
      $('tbody input').prop('checked',status);
      if(status){
        $('#delAll').show();
      }else{
        $('#delAll').hide();
      }
    })

    //使用事件委托的方式为别的多选框注册点击事件
    $('tbody').on('click','input',function(){
      //控制全选的多选框
      var all = $('thead input');
      var cks = $('tbody input');
      // if(cks.size() == $('tbody input:checked').size()){
      //   all.prop('checked',true);
      // }else{
      //   all.prop('checked',false);
      // }
      all.prop("checked",cks.size()==$('tbody input:checked').size());
      //选中的多选框超过2个，就显示批量删除
      if($('tbody input:checked').size() >= 2){
        $('#delAll').show();
      }else{
        $('#delAll').hide();
      }
    })

    //点击批量删除
    $('#delAll').on('click',function(){
      //收集所有的选中的id,发送到服务器进行数据的删除
      var cks = $('tbody input:checked');
      //准备好的收集多个id的数组
      var ids = [];
      cks.each(function(index,el){
        var id = $(el).parents('tr').attr('data-categoryId');
        ids.push(id);
      })
      // console.log(ids);
      $.ajax({
        type: "post",
        url: "api/_delCategories.php",
        data: {ids:ids},
        dataType: "json",
        success: function (res) {
          if(res.code == 1){
            cks.parents('tr').remove();
          }
        }
      });
    })
  });
  </script>
</body>
</html>
